<template>
  <span style="position: relative">
    <input ref="input" class="my-input" :value="value" @input="inputEvent" :type="showtype"    />

    <span
      class="delete-icon"
      v-show="clearable && value !== ''"
      @click="show" 
    >
 <i :class="`iconfont ${icon}`" ></i>
    </span>
  </span>
</template>
<script>
export default {
  name: "MyInput",
  props: {
    value: String,
    clearable: Boolean,
    icon: {
      type: String,
      default: "icon-dianji",
    },
  },
  data() {
    return {
      showtype:"text",
      icon:"icon-yanjing"
    };
  },
  
  methods: {
    inputEvent(event) {
      this.$emit("input", event.target.value);
    },
    closeEvent() {
      this.$emit("input", "");
       this.$refs.input.focus();
    },
    show(){
      if(this.showtype=="text"){
        this.icon="icon-yanjing";
        this.password="password";
      }else{
        this.showtype="text";
        this.icon="icon-yanjing1"
      }
    }
  },
};
</script>
<style scoped>
.my-input {
  width: 200px;
  height: 40px;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 14px;
}
.my-input:focus {
  border: 1px solid #409eff;
}
.delete-icon {
  position: absolute;
  right: 10px;
  color: #999;
  cursor: pointer;
  top: 50%;
  margin-top: -10.5px;
}
.delete-icon:hover {
  color: #333;
}
</style>
